<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="dialog.css" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.js"></script>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/0.9.19/angular-0.9.19.js"></script>
<link rel="stylesheet" href="homePage.css" />
<style type="text/css">
table,tr,th,td {
	border: 1px solid black;
	padding-left: 5px;
	border-collapse: collapse;
	color: rgb(0, 51, 102);
	vertical-align: middle;
	font-family:Times;
}

.wishList tr:nth-child(odd) {
	background-color: rgb(229, 238, 204);
}

.wishList tr:nth-child(even) {
	background-color: rgb(255, 255, 255);
}
</style>

<script>
	function init(diglogId) {
		var highlightTitleBarColor = "#F59C0C";
		var normalTitleBarColor = "#A8CEE6";
		if ($('#'+diglogId).length == 0) {
			$("body").append("<div id=\""+diglogId+"\" title=\"Dialog Title\">I'm a dialog</div>");
			$('#'+diglogId).dialog({
				open: function( event, ui ) {},
				close: function( event, ui ) {$('#'+diglogId).remove();}				
			});
			
			$($('#'+diglogId).siblings('.ui-dialog-titlebar')).click(function() {
				$(this).css('background-color',normalTitleBarColor);
			});
			
			$('#'+diglogId).parent().removeClass();
			$('#'+diglogId).parent().addClass('ui-dialog ui-resizable ui-widget-content');
			$('#'+diglogId).parent().css('padding', '0em');
			$('#'+diglogId).siblings(0).removeClass('ui-corner-all ui-widget-header');
			$('#'+diglogId).siblings(0).css('height','21px');
			$('#'+diglogId).siblings(0).css('padding','0em');
			$('#'+diglogId).siblings('.ui-dialog-titlebar').css('background-color',normalTitleBarColor);
			$('#'+diglogId).siblings(0).children('button').removeClass('ui-corner-all');
			$('#'+diglogId).siblings(0).children('button').css('margin-top','-11px');
			$('#'+diglogId).siblings(0).children('button').css('margin-right','-4.8px');
			$('.ui-resizable-n, .ui-resizable-s').css('height','10px');
			$('#'+diglogId).siblings('.ui-dialog-titlebar').css('background-color', highlightTitleBarColor);
		}
	}
</script>
</head>
<body style="width: 740px; ">
	<button id="init" onclick="init('dig1');" style="height: 53px; width: 130px; ">INIT</button>
	<table style="width: 533px;">
		<thead style="height: 5px; width: 11px;">
			<tr>
				<td>Cell</td>
			</tr>
		</thead>

	</table>

</body>
</html>